<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>draggable-公共与插件-JavaScript-WSCORE</title>
	<link href="../../theme/style.css" rel="stylesheet" type="text/css" />
	<script src="../../theme/browser.js" type="text/javascript"></script>
</head>
<body>
	<div class="header">
		<ol>
			<li><a href="../../index.html">首页</a></li>
			<li>draggable</li>
		</ol>
	</div>

	<h1>draggable</h1>
	<div class="intro">
		用途: 指定某元素，允许鼠标拖拽改变位置<br />
		示例: <a dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-demo]" href="#">代码片段</a>
<!--CODE-BEGINE-->
<div code-demo style="display:none">
<code title="代码片段">// HTML
<div id="draggable">
	<div id="handle">Handle</div>
	<div id="content">
		Content
	</div>
</div>
// jQuery(拖拽handle时, draggable位置变更)
$('#draggable').draggable({
	handle : $('#handle')
});</code>
</div>
<!--CODE-FINISH-->
	</div>

	<h2>选项<em>plainObject</em></h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>选项名</th>
					<th>选项值</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>&#160;</td>
					<td>box</td>
					<td>
						<a dialog dialog-selector="[option-box]" dialog-no-title="true" href="">jQuery</a> (Selector)
						<div option-box style="display:none">
							<code>// eg.1与eg.2 方法等价
// #1
$('#example').draggable()
// #2
$.fn.draggable({
	box : $('#example')
});</code>
						</div>
					</td>
					<td>被变更位置的元素(默认: 从事件中提取)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>handle</td>
					<td><a dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-demo]" href="#">jQuery</a> (Selector)</td>
					<td>仅拖拽handle时, box才变更位置(默认：box)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>container</td>
					<td>
						<a dialog dialog-selector="[option-container]" dialog-no-title="true" href="">jQuery</a> (Selector)
						<div option-container style="display:none">
							<code>$('#example').draggable({
	container : $('body')
});</code>
						</div>
					<td>限box在某个区域范围内容变更位置(默认: 整个文档)</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	
	<h2>方法<em>jQuery</em></h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>方法名</th>
					<th>参数项</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>&#160;</td>
					<td>start</td>
					<td>
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-draggable-start]">object</a>, event
						<div code-draggable-start style="display:none">
							<code title="接受参数">/*!
* 方法接受参数
* @param object obj, 当前draggable对象组
*               object box, 
*               object handle, 
*               object container, 
* @param event event, 鼠标事件
*/
$('#code-ajax-function-param').draggable({
	'start' : function(obj, event){
		// 先：拖拽前执行
	}, 
	'stop' : function(obj, event){
		// 后：拖拽后执行
	}
});</code>
						</div>
					</td>
					<td>AJAX请求前执行start方法</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>stop</td>
					<td><a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-draggable-start]">object</a>, event</td>
					<td>AJAX请求完成后执行stop方法</td>
				</tr>
			</tbody>
		</table>
	</div>

	
	


	
	
	
			
</body>
</html>